<template>
  <div>
    <navBar title="退回订单" @onClickLeft="onClickLeft" />
    <!-- <van-cell-group>
            <van-field 
            v-model="value" 
            type="textarea" 
            label="退回理由" 
            placeholder="请输入退回理由(最多100字)" 
            colon 
            required
            maxlength="100"
            size='large'
            class="van-field-isRequired"
            />
        </van-cell-group> -->
    <van-cell-group>
      <van-cell title="退回责任人" class="cell1">
        <van-radio-group v-model="radio" direction="horizontal">
          <van-radio name="1">个人</van-radio>
          <van-radio name="2">客户</van-radio>
        </van-radio-group>
      </van-cell>

      <van-field
        v-if="this.radio == '1'"
        v-model="backReson"
        rows="2"
        autosize
        label="退回理由"
        type="textarea"
        maxlength="100"
        placeholder="请输入退回理由(最多100字)"
        show-word-limit
      />
      <van-field
        v-if="radio == '2'"
        v-model="chooseItemValue"
        label="退回理由"
        placeholder="点击选择退回理由"
        @click="show = true"
        readonly
      />

      <van-action-sheet
        v-model="show"
        :actions="actions"
        cancel-text="取消"
        close-on-click-action
        @select="checkItem"
      />
    </van-cell-group>

    <div class="supplement-btn">
      <van-button round block type="info" native-type="submit" @click="onSubmit"
        >确定退回</van-button
      >
    </div>
  </div>
</template>

<script>
import navBar from "@cb/navBar.vue";
import { Field } from "vant";
import { orderBack } from "@a/order.js";
import { Dialog, Toast } from "vant";
export default {
  components: {
    navBar
  },
  data() {
    return {
      chooseItemValue: "",
      id: null,
      radio: "1",
      backReson: "",
      show: false,
      actions: [
        { selectId:1,name: "提供的账号密码错误" },
        { selectId:2,name: "用户提供的文件不全" },
        { selectId:3,name: "用户拍照不清晰" }
      ],
      isSelf:'',
      postselectId:''
    };
  },
  created() {
    this.id = this.$route.query && this.$route.query.order_id;
  },
  methods: {
    submitPost() {
      let params = {
        remark: this.backReson || this.chooseItemValue,
        order_id: this.id,
        isSelf:this.isSelf,
      };
      if(this.isSelf == -1){
        params = {
        //remark: this.backReson,
        order_id: this.id,
        isSelf:this.isSelf,
        selectId:this.postselectId
        };
      }else{
        params = {
        remark: this.backReson,
        order_id: this.id,
        isSelf:this.isSelf,
        //selectId:this.postselectId
      };
      }
      orderBack(params).then(res => {
        if (res.code === 200) {
          Toast.success("成功！");
          this.$router.push({
            path: `/replace`,
            query: {
              id: this.id
            }
          });
        }
      });
    },
    onSubmit() {
      if ((this.backReson.trim() == "" && this.radio == 1) || (this.chooseItemValue == "" && this.radio != 1)) {
        Toast.fail("请先填写退回理由");
        return;
      }
      if(this.radio == 1){
        this.chooseItemValue = ''
        this.isSelf = 1
      }else{
        this.backReson = ''
        this.isSelf = -1
      }
      this.submitPost();
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    checkItem(action, index) {
      this.chooseItemValue = this.actions[index].name;
      this.postselectId = this.actions[index].selectId
      console.log(this.postselectId);
    }
  },
};
</script>
<style lang="less" scoped>
.van-field__control {
  border: 1px solid !important;
}
</style>
